<template>
  <div class="c-popup oneKey-box" mask :class="{ open: show }" v-if="show">
    <div
      class="popup-body oneKey-body"
      :style="{ transform: 'scale(' + scale + ')' }"
    >
      <div v-show="!mapShow">
        <i class="popup-close" @click="oneKeyAlarmDialogClose"></i>
        <div class="popup-header"><span>一键告警</span></div>
        <div class="popup-content oneKey-content">
          <div class="row-box">
            <div class="row-title must">事件标题</div>
            <div class="row-value">
              <el-input
                type="text"
                class="c-input"
                v-model="alarmTitle"
                placeholder="请输入"
                maxlength="100"
              />
            </div>
          </div>
          <div class="row-box">
            <div class="row-title must">告警类型</div>
            <div class="row-value row-width">
              <el-select
                class="c-select"
                popper-class="c-select-dropdown one-key-ar"
                v-model="alarmType"
                placeholder="请选择"
                size="mini"
                @change="changeAlarmType"
              >
                <el-option
                  v-for="(item, index) in alarmTypeList"
                  :key="index"
                  :label="item.typeName"
                  :value="item.typeValue"
                ></el-option>
              </el-select>
            </div>
            <div class="row-title must time">告警时间</div>
            <div class="row-value row-width">
              <el-date-picker
                type="datetime"
                class="c-date-editor alarm-search"
                popper-class="c-date-editor-picker one-key-ar"
                v-model="alarmTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择"
                :editable="false"
                :clearable="false"
                size="mini"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </div>
          </div>
          <div class="row-box">
            <div class="row-title must">事发地点</div>
            <div class="small-select-box">
              <el-select
                ref="province"
                class="c-select"
                popper-class="c-select-dropdown one-key-ar"
                v-model="province"
                placeholder="请选择"
                size="mini"
                @change="areaCodeChange"
              >
                <el-option
                  v-for="(item, index) in provinceList"
                  :key="index"
                  :label="item.areaName"
                  :value="item.areaCode"
                ></el-option>
              </el-select>
            </div>
            <div class="small-select-box">
              <el-select
                ref="city"
                class="c-select"
                popper-class="c-select-dropdown one-key-ar"
                v-model="city"
                placeholder="请选择"
                size="mini"
                @change="areaCodeChange"
              >
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :label="item.areaName"
                  :value="item.areaCode"
                ></el-option>
              </el-select>
            </div>
            <div class="small-select-box">
              <el-select
                ref="district"
                class="c-select"
                popper-class="c-select-dropdown one-key-ar"
                v-model="district"
                placeholder="请选择"
                size="mini"
                @change="areaCodeChange"
              >
                <el-option
                  v-for="(item, index) in districtList"
                  :key="index"
                  :label="item.areaName"
                  :value="item.areaCode"
                ></el-option>
              </el-select>
            </div>
            <div class="big-box">
              <el-input
                class="c-input address"
                v-model="address"
                placeholder="详细地址"
                maxlength="100"
                :c-tip="address"
              />
            </div>
          </div>

          <div class="row-box">
            <div class="row-title must">经纬度</div>
            <div class="small-select-box">
              <el-input
                type="text"
                class="c-input"
                v-model="longitude"
                placeholder="经度"
              />
            </div>
            <div class="small-select-box">
              <el-input
                type="text"
                class="c-input"
                v-model="latitude"
                placeholder="纬度"
              />
            </div>
            <div>
              <i
                class="iconfont icon-tongyong_icon_ditudingwei po"
                @click="doMapShow"
              ></i>
            </div>
          </div>
          <div class="row-box">
            <div class="row-title must">事件描述</div>
            <div class="row-value">
              <el-input
                class="c-input c-textarea"
                type="textarea"
                maxlength="255"
                placeholder="请输入"
                v-model="desc"
              >
              </el-input>
            </div>
          </div>
          <div class="row-box">
            <div class="row-title">备注</div>
            <div class="row-value">
              <el-input
                class="c-input c-textarea"
                type="textarea"
                maxlength="255"
                placeholder="请输入"
                v-model="remark"
              >
              </el-input>
            </div>
          </div>
          <div class="row-box" style="margin-bottom: 6px">
            <div class="row-title must">上传附件</div>
            <div class="row-value">
              <el-upload
                ref="upload"
                class="pic-upload"
                name="attach"
                action=""
                :http-request="doUpload"
                :headers="upload.headers"
                list-type="picture-card"
                :accept="upload.accept"
                :before-upload="beforeUpload"
                :before-remove="beforeRemove"
                :on-preview="doPreview"
                :file-list="[...upload.imageList, ...upload.videoList]"
                style="text-align: left"
              >
                <i class="iconfont icon-tongyong_icon_tianjiabiaoqian"></i>
              </el-upload>
            </div>
          </div>
          <div class="buttons-box">
            <div
              class="c-button submit btn-80-32"
              @click="doSubmit"
              style="width: 120px; margin-right: 6px"
            >
              <b />提交<b />
            </div>
            <div
              class="c-button btn-80-32"
              style="width: 120px"
              @click="oneKeyAlarmDialogClose"
            >
              取消
            </div>
          </div>
        </div>
      </div>
      <div :class="{ 'map-hide': !mapShow }">
        <i class="popup-close" @click="doMapOk"></i>
        <div class="popup-header"><span>经纬度</span></div>
        <div class="popup-content map-height">
          <div :id="`map${pid}`" class="map-div">
            <AmapSearchBox
              class="search-box"
              v-if="mapShow"
              :on-search-result="onMapSearchResult"
              maxHeight="320px"
            ></AmapSearchBox>
            <div v-if="isMap">
              <map-type
                :mapMap="mapMap"
                :location="'auto 52px 45px auto'"
              ></map-type>
              <map-zoom
                :map="oneKeyAlarmMap"
                :location="'auto 16px 45px auto'"
              ></map-zoom>
            </div>
          </div>
          <div class="btns map-btns buttons-box">
            <div
              class="c-button submit btn-80-32"
              style="width: 120px; margin-right: 6px"
              @click="doMapOk(1)"
            >
              <b />确定<b />
            </div>
            <div
              class="c-button btn-80-32"
              style="width: 120px"
              @click="doMapOk()"
            >
              取消
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="previewImg.file.name || '查看'"
      :visible.sync="previewImg.show"
      custom-class="oneKey-big-img"
    >
      <div v-if="previewImg.file.type">
        <img
          v-if="previewImg.file.type.indexOf('image') !== -1"
          :src="previewImg.file.tagPictureUrl"
        />
        <video v-else :src="previewImg.file.fileVideoUrl" controls></video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import $ from "jquery";
import { $v, urlSystem, DateFormat } from "@/utils/public";
import { uploadImg } from "@/api/applicationManager/index.js";
import {
  getRegion,
  getEnumInfo,
  findOrderAlarm,
  addAlarmOrder,
} from "@/api/modules/eventManagement/eventManagement.js";
import videoImg from "@/assets/image/videoImg.png"; //视频图标
import positionIcon from "@/assets/image/position-one.png"; //点标记图标
import AmapSearchBox from "@/components/vueAmap/amap-search-box.vue";
import {
  initCTMap,
  addMarker,
  poiContraryGeocodingQuery,
  setZoomAndCenter,
  markerPicking,
  addScaleLine,
} from "@/utils/openLayerCommon";
import MapZoom from "@/components/openlayer/mapZoom.vue";
import MapType from "@/components/openlayer/mapType.vue";
export default {
  name: "one-key-alarm",
  components: {
    MapType,
    MapZoom,
    AmapSearchBox,
  },
  data() {
    let _self = this;
    return {
      mapMap: null, //地图
      isMap: false, //地图
      mapMark: null,
      pid: this.getUUID(),
      device: {}, //设备信息
      alarmTitle: "", //告警标题

      alarmTypeList: [], //告警类型列表
      alarmType: "", //告警类型

      alarmLevelList: [], //告警等级列表
      alarmLevel: "", //告警等级

      alarmTime: "", //告警时间

      areaCodes: [],
      provinceList: [], //省份列表
      province: "", //选择的省份
      provinceBack: "", //回填的省份

      cityList: [], //地市列表
      city: "", //选择的地市
      cityBack: "", //回填的地市

      districtList: [], //区县列表
      district: "", //选择的区县
      districtBack: "", //回填的区县
      defaultProps: {
        value: "areaCode",
        label: "areaName",
        level: "areaLevel",
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node && node.data && node.data.areaLevel) {
              getRegion({
                areaLevel: parseInt(node.data.areaLevel) + 1,
                areaParentCode: node.data.areaCode,
              }).then((res) => {
                if (res.code === 200) {
                  const nodes = res.data.map((item) => ({
                    areaCode: item.areaCode,
                    areaName: item.areaName,
                    areaLevel: item.areaLevel,
                    leaf: item.areaLevel >= 4,
                  }));
                  resolve(nodes);
                }
              });
            }
          }, 200);
        },
      },
      address: "", //详细地址

      longitude: "", //经度
      latitude: "", //纬度

      desc: "", //描述
      remark: "", //备注

      mapShow: false, //显示地图
      oneKeyAlarmMap: null, //地图
      mapInstance: null, //地图
      centers: [116.384587, 39.910934], //高德地图默认中心点
      mapSearchOption: {
        city: "全国",
        citylimit: true,
      },
      placeSearch: null,
      geocoder: {}, //坐标点转地址

      upload: {
        //上传参数
        accept: "image/*,video/*", //文件上传格式
        action: "", //文件上传路径
        type: false, //1图片, 2视频
        delete: "", //删除文件
        imageList: [], //图片列表
        videoList: [], //视频列表
      },
      previewImg: {
        file: {},
        show: false,
      },
      scale: 1,
      pickerOptions: {
        disabledDate: (time) => {
          return (
            time.getTime() > Date.now() ||
            time.getTime() < new Date("2021-06-30").getTime()
          );
        },
      },
    };
  },
  props: {
    data: {
      type: [Object, Boolean],
      default: false,
    },
    show: {
      type: Boolean,
      default: false,
    },
    myTransform: {
      type: Number,
      default: 1,
    },
    dafaultPic: {},
  },
  watch: {
    /**
     * 监听一件告警弹框显示
     */
    show(b) {
      this.scale = 1 / Number($(".video-body").attr("scale") || 1);
      if (b) {
        this.init();
      } else {
        this.device = {};
        $(".el-input__inner", "#areaCodes" + this.pid).val("");
      }
      if (b && this.data) {
        this.device = JSON.parse(JSON.stringify(this.data));
        this.longitude = this.device.longitude || "";
        this.latitude = this.device.latitude || "";
        this.lnglatTofixed6();
        if (this.oneKeyAlarmMap) {
          this.getAddress(this.longitude, this.latitude, true);
        }
      } else {
        this.device = {};
      }
      if (!b && this.map) {
        this.oneKeyAlarmMap = false;
        this.map.destroy();
      }
    },
    /**
     * 默认图片上传
     */
    dafaultPic(file) {
      if (file) {
        file.uid = new Date().getTime();
        this.upload.type = 1;
        this.doUpload({
          file: file,
        });
      }
    },
    /**
     * 监听选择省份
     */
    province(val) {
      this.cityList = [];
      this.city = "";
      this.districtList = [];
      this.district = "";
      if (val) {
        this.getCity(val);
      }
    },
    /**
     * 监听选择地市
     */
    city(val) {
      this.districtList = [];
      this.district = "";
      if (val) {
        this.getdistrict(val);
      }
    },
  },
  methods: {
    init() {
      this.getAlarmType();
      this.getAlarmLevel();
      this.getProvince();
      this.$nextTick(() => {
        this.initCTMap();
      });
    },
    lnglatTofixed6() {
      if (this.longitude) {
        this.longitude = Number(this.longitude).toFixed(6);
      }
      if (this.latitude) {
        this.latitude = Number(this.latitude).toFixed(6);
      }
    },
    /**
     * 更改告警类型，默认告警标题
     */
    changeAlarmType(value) {
      let _this = this;
      this.alarmTypeList.forEach((item) => {
        if (item.typeValue == value) {
          _this.alarmTitle = item.typeName;
          let gaojing = item.typeName.indexOf("告警") > -1 ? "" : "告警";
          _this.desc = "发生" + item.typeName + gaojing;
        }
      });
    },
    /**
     * 提交
     */
    doSubmit() {
      if (this.submitCheck()) {
        // let address;
        // const areaCodesChecked = this.$refs.areaCodes.getCheckedNodes();
        // if(areaCodesChecked && areaCodesChecked[0]) {
        //   address = areaCodesChecked[0].pathLabels.join('') + this.address;
        // }else {
        //   address = this.provinceBack + this.cityBack + this.districtBack + this.address;
        // }
        const { value: provinceId, label: provinceName } =
          this.$refs.province.selected;
        const { value: cityId, label: cityName } = this.$refs.city.selected;
        const { value: countyId, label: districtName } =
          this.$refs.district.selected;
        const address = provinceName + cityName + districtName + this.address;
        const params = {
          warningSource: "3", //告警来源 1-AI上报； 2-人工上报；3-一键告警
          alarmBody: this.alarmTitle, //事件标题
          warningTypeId: this.alarmType, //告警类型
          emergencyLevel: this.alarmLevel, //告警等级
          alarmTime: this.alarmTime, //告警时间
          provinceId, //省份
          cityId, //地市
          countyId, //区县
          address: address, //详细地址
          longitude: this.longitude, //经度
          latitude: this.latitude, //纬度
          description: this.desc, //事件描述
          remark: this.remark, //描述
          imgs: this.upload.imageList, //上传图片
          videos: this.upload.videoList, //上传视频
          deviceCode: this.device.deviceCode, //设备编码
          deviceName: this.device.deviceName, //设备名称
          channelCode: this.device.channelCode, //通道编码
          channelName: this.device.channelName, //通道名称
          importanceLevel: "1", //重要等级为一级
        };
        addAlarmOrder(params).then((res) => {
          if (res.code === 200) {
            $message.s("保存成功");
            this.oneKeyAlarmDialogClose();
          } else {
            $message.a(res);
          }
        });
      }
    },
    /**
     * 提交校验
     */
    submitCheck() {
      if (!this.alarmTitle) {
        $v.message({
          message: "请输入事件标题",
        });
        return false;
      }
      if (!this.alarmType) {
        $v.message({
          message: "请选择事件类型",
        });
        return false;
      }
      // if (!this.alarmLevel) {
      //   $v.message({
      //     message: '请选择事件等级'
      //   });
      //   return false;
      // }
      if (!this.alarmTime) {
        $v.message({
          message: "请选择告警时间",
        });
        return false;
      }
      const { value: provinceId } = this.$refs.province.selected;
      const { value: cityId } = this.$refs.city.selected;
      const { value: countyId } = this.$refs.district.selected;
      if (!provinceId || !cityId || !countyId) {
        $v.message({
          message: "请选择事发地点",
        });
        return false;
      }
      if (!this.address) {
        $v.message({
          message: "请输入详细地址",
        });
        return false;
      }
      if (!this.longitude || !this.latitude) {
        $v.message({
          message: "请输入经纬度",
        });
        return false;
      }
      if (!this.desc) {
        $v.message({
          message: "请输入事件描述",
        });
        return false;
      }
      if (
        this.upload.imageList.length === 0 &&
        this.upload.videoList.length === 0
      ) {
        $v.message({
          message: "请上传附件",
        });
        return false;
      }
      return true;
    },
    /**
     * 查询告警类型
     */
    getAlarmType() {
      findOrderAlarm({ isQueryAll: "2" }).then((resp) => {
        if (resp.code === 200) {
          this.alarmTypeList = resp.data || [
            { typeCode: "00", typeName: "无类型" },
          ];
          //大屏告警事件页面一键告警新增页面告警类型列表需要屏蔽手动新增告警类型
          this.alarmTypeList = this.alarmTypeList.filter(
            (item) =>
              !(item.alarmSource == "2" && item.tenantId && item.industryCode)
          );
        }
        if (!this.alarmTime) {
          this.alarmTime = DateFormat.now(new Date(resp.time));
        }
      });
    },
    /**
     * 查询告警等级
     */
    getAlarmLevel() {
      getEnumInfo({ enumTypeId: 41 }).then((resp) => {
        if (resp.code === 200) {
          this.alarmLevelList = resp.data || [];
        }
        if (!this.alarmTime) {
          this.alarmTime = DateFormat.now(new Date(resp.time));
        }
      });
    },
    areaCodeChange() {
      this.address = "";
    },
    /**
     * 查询行政区划 省份
     */
    getProvince() {
      this.province = "";
      getRegion({ areaLevel: "2" }).then((resp) => {
        if (resp.code === 200) {
          this.provinceList = resp.data || [];
          if (this.provinceBack) {
            for (let i in this.provinceList) {
              if (this.provinceList[i].areaName === this.provinceBack) {
                this.province = this.provinceList[i].areaCode;
                this.areaCodes = [];
                this.areaCodes.push(this.province);
                break;
              }
            }
          }
        }
      });
    },
    /**
     * 查询行政区划 地市
     */
    getCity(parentCode) {
      getRegion({ areaLevel: "3", areaParentCode: parentCode }).then((resp) => {
        if (resp.code === 200) {
          this.cityList = resp.data || [];
          if (this.cityBack) {
            for (let i in this.cityList) {
              if (this.cityList[i].areaName === this.cityBack) {
                this.city = this.cityList[i].areaCode;
                this.areaCodes.push(this.city);
                break;
              }
            }
          }
        }
      });
    },
    /**
     * 查询行政区划 区县
     */
    getdistrict(parentCode) {
      getRegion({ areaLevel: "4", areaParentCode: parentCode }).then((resp) => {
        if (resp.code === 200) {
          this.districtList = resp.data || [];
          if (this.districtBack) {
            for (let i in this.districtList) {
              if (this.districtList[i].areaName === this.districtBack) {
                this.district = this.districtList[i].areaCode;
                this.areaCodes.push(this.district);
                $(".el-input__inner", "#areaCodes" + this.pid).val(
                  this.provinceBack +
                    " / " +
                    this.cityBack +
                    " / " +
                    this.districtBack
                );
                break;
              }
            }
          }
        }
      });
    },
    /**
     * 图片上传前处理
     */
    beforeUpload(file) {
      if (this.upload.imageList.length + this.upload.videoList.length >= 8) {
        $v.message({
          message: "最多允许上传8个附件",
        });
        this.$refs.upload.$data.uploadFiles.pop();
        return false;
      }
      if (file.type.indexOf("image") !== -1) {
        this.upload.action = urlSystem + "/upload/img";
        this.upload.type = 1;
        if (file.size > 1024 * 1024 * 30) {
          $v.message({
            message: "上传图片不允许超过30MB",
          });
          this.$refs.upload.$data.uploadFiles.pop();
          return false;
        }
      } else if (file.type.indexOf("video") !== -1) {
        this.upload.action = urlSystem + "/upload/video";
        this.upload.type = 2;
        if (this.upload.videoList.length > 0) {
          $v.message({
            message: "只允许上传一个视频",
          });
          this.$refs.upload.$data.uploadFiles.pop();
          return false;
        }
        if (file.size > 1024 * 1024 * 30) {
          $v.message({
            message: "上传视频不允许超过30MB",
          });
          this.$refs.upload.$data.uploadFiles.pop();
          return false;
        }
      } else {
        $v.message({
          message: "只允许上传图片或视频",
        });
        this.$refs.upload.$data.uploadFiles.pop();
        return false;
      }
    },
    /**
     * 图片删除前处理
     */
    beforeRemove(file) {
      if (!file) {
        return false;
      }
      this.upload.action = urlSystem + "/upload/delete";
      if (file.type.indexOf("image") !== -1) {
        for (let i = 0; i < this.upload.imageList.length; i++) {
          if (this.upload.imageList[i].uid === file.uid) {
            this.upload.delete = this.upload.imageList[i].fileName;
            this.upload.imageList.splice(i, 1);
            break;
          }
        }
      }
      if (file.type.indexOf("video") !== -1) {
        for (let j = 0; j < this.upload.videoList.length; j++) {
          if (this.upload.videoList[j].uid === file.uid) {
            this.upload.delete = this.upload.videoList[j].fileName;
            this.upload.videoList.splice(j, 1);
            break;
          }
        }
      }
    },
    /**
     * 图片预览
     */
    doPreview(file) {
      this.previewImg.show = true;
      this.previewImg.file = file;
    },
    /**
     * 图片上传
     */
    doUpload(data) {
      if (this.upload.type == 1) {
        this.doUploadImg(data);
      } else if (this.upload.type == 2) {
        this.doUploadVideo(data);
      }
    },
    /**
     * 图片上传
     */
    doUploadImg(data) {
      let formData = new FormData();
      formData.append("file", data.file);
      uploadImg(formData).then(
        (resp) => {
          if (resp.code === 200) {
            this.dealUpload(resp, data);
          } else {
            this.$refs.upload.$data.uploadFiles.pop();
          }
        },
        () => {
          this.$refs.upload.$data.uploadFiles.pop();
        }
      );
    },
    /**
     * 视频上传
     */
    doUploadVideo(data) {
      let formData = new FormData();
      formData.append("file", data.file);
      uploadImg(formData).then(
        (resp) => {
          if (resp.code === 200) {
            this.dealUpload(resp, data);
          } else {
            this.$refs.upload.$data.uploadFiles.pop();
          }
        },
        () => {
          this.$refs.upload.$data.uploadFiles.pop();
        }
      );
    },
    dealUpload(resp, data) {
      if (resp.code === 200) {
        if (this.upload.type === 1) {
          this.upload.imageList.push({
            uid: data.file.uid,
            type: data.file.type,
            name: resp.data.fileName,
            url: resp.data.fileUrl,
            fileName: resp.data.fileName,
            tagPictureUrl: resp.data.fileUrl,
          });
        }
        if (this.upload.type === 2) {
          this.upload.videoList.push({
            uid: data.file.uid,
            type: data.file.type,
            name: resp.data.fileName,
            url: videoImg,
            fileName: resp.data.fileName,
            fileVideoUrl: resp.data.fileUrl,
            recordType: 0,
          });
        }
      } else {
        this.$refs.upload.$data.uploadFiles.pop();
      }
    },
    /**
     * 关闭一件告警弹出框
     */
    oneKeyAlarmDialogClose() {
      this.reset();
      this.$emit("closed");
    },
    /**
     * 重置数据
     */
    reset() {
      this.alarmTitle = ""; //告警标题

      this.alarmType = ""; //告警类型

      this.alarmLevel = ""; //告警等级

      this.alarmTime = ""; //告警时间

      this.province = ""; //选择的省份
      this.provinceBack = ""; //回填的省份

      this.city = ""; //选择的地市
      this.cityBack = ""; //回填的地市

      this.district = ""; //选择的区县
      this.districtBack = ""; //回填的区县

      this.address = ""; //详细地址

      this.longitude = ""; //经度
      this.latitude = ""; //纬度

      this.desc = ""; //描述
      this.remark = ""; //备注

      this.geocoder = {}; //坐标点转地址

      this.upload = {
        //上传参数
        accept: "image/*,video/*", //文件上传格式
        action: "", //文件上传路径
        type: false, //1图片, 2视频
        delete: "", //删除文件
        imageList: [], //图片列表
        videoList: [], //视频列表
      };
      this.$refs.upload.clearFiles();
    },
    /**
     * 显示地图
     */
    doMapShow() {
      if (!this.oneKeyAlarmMap) {
        $v.message({
          message: "地图加载中，请稍后..!",
        });
      } else {
        this.mapShow = true;
        if (this.longitude && this.latitude) {
          setZoomAndCenter(
            this.oneKeyAlarmMap,
            Number(this.longitude),
            Number(this.latitude),
            12
          );
          this.doMarker(this.longitude, this.latitude);
        }
      }
    },
    onMapSearchResult(e) {
      setZoomAndCenter(this.oneKeyAlarmMap, Number(e.lng), Number(e.lat), 16);
      this.doMarker(e.lng, e.lat);
    },

    /**
     * 地图确定
     */
    doMapOk(type) {
      this.mapShow = false;
      if (type) {
        this.addressBack();
      }
    },
    /**
     * 地图打点
     */
    doMarker(lng, lat) {
      if (this.mapMark) {
        this.oneKeyAlarmMap.removeOverlay(this.mapMark);
      }
      $(".search-tips").css({ display: "none" });
      let imgObj = {
        imgPath: positionIcon,
        imgWidth: 32,
        imgHeight: 32,
        offset: [-17, -32],
      };
      this.mapMark = addMarker(this.oneKeyAlarmMap, lng, lat, "mark", imgObj);
      this.getAddress(lng, lat);
    },
    /**
     * 坐标获取地址
     */
    getAddress(lon, lat, type) {
      if (!lon || !lat) {
        return false;
      }
      const params = {
        location: lon + "," + lat,
      };
      poiContraryGeocodingQuery(params).then((res) => {
        if (res.code === 200) {
          this.geocoder = res.data;
          this.geocoder.lng = lon;
          this.geocoder.lat = lat;
          if (type) {
            this.addressBack({ lon, lat });
          }
        } else {
          $message.a(res);
        }
      });
    },
    /**
     * 地图地址 格式化
     */
    addressBack() {
      this.provinceBack = this.geocoder[0].region.province;
      this.cityBack =
        this.geocoder[0].region.city || this.geocoder[0].region.county;
      this.districtBack = this.geocoder[0].region.county;
      this.address = this.geocoder[0].address;
      this.longitude = this.geocoder[0].location.split(",")[0] || "";
      this.latitude = this.geocoder[0].location.split(",")[1] || "";
      this.lnglatTofixed6();
      this.areaCodes = null;
      this.$nextTick(() => {
        this.areaCodes = [];
        this.$nextTick(() => {
          this.getProvince();
        });
      });
    },
    /**
     * 初始化高德2.0版本地图
     */
    initCTMap() {
      let { map, mapMap } = initCTMap("map" + this.pid, this.centers, 1, 16);
      this.oneKeyAlarmMap = map;
      this.mapMap = mapMap;
      this.isMap = true;
      this.initMap(map);
    },
    /**
     * 地图初始化
     */
    initMap(map) {
      //添加比例尺
      addScaleLine(map, "oneKeyAlarm-scaleLine", 88);
      this.getAddress(this.longitude, this.device.latitude, true);
      markerPicking(this.oneKeyAlarmMap, (lngLat) => {
        this.doMarker(lngLat[0], lngLat[1]);
      });
    },
    /**
     * 生成uuid
     */
    getUUID() {
      const crypto = window.crypto || window.msCrypto;
      const array = new Uint32Array(1);
      const r = crypto.getRandomValues(array)[0];
      return Date.now() + "1" + r;
    },
  },
};
</script>
<style lang="scss" scoped>
.oneKey-box {
  .oneKey-content {
    .c-textarea {
      height: auto !important;
      min-height: 68px;
      resize: none;
      /deep/ textarea {
        min-height: inherit !important;
        padding: 5px 12px;
        font-size: 14px;
        height: 100%;
        background: transparent;
        border: none;
        color: #e8f3fe;
        &::placeholder {
          color: rgba(232, 243, 254, 0.7) !important;
        }
      }
    }
  }
}
.oneKey-box /deep/ .map-type .po {
  margin: 0;
}
.pic-upload {
  /deep/ .el-upload-list__item-status-label,
  /deep/ .el-icon-close-tip {
    display: none !important;
  }
}
.map-hide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none !important;
}

.label {
  color: rgba(0, 168, 255, 1);
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  float: right;
}

.must:before {
  content: "*";
  color: #e73234;
  position: relative;
  left: -2px;
}

.po {
  text-align: center;
  line-height: 32px;
  font-size: 20px;
  color: #e8f3fe !important;
  text-shadow: none !important;
  cursor: pointer;
  margin-left: 0 !important;
}

.btns {
  text-align: center;
}

.btns .btn {
  display: inline-block;
  width: 94px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  margin: 0 12px;
  position: relative;
  z-index: 2;
  color: #00a8ff;
  font-size: 16px;
  background: url("../../../assets/image/monitor-button-blue.png");
  background-size: 100% 100%;
  cursor: pointer;
}

.btns .btn.cancel {
  filter: grayscale(100%);
}

.map-btns {
  width: 100%;
  position: absolute;
  bottom: 12px;
  left: 0;
  /*pointer-events: none !important;*/
}

.map-btns .btn {
  pointer-events: auto !important;
}

.map-div {
  width: calc(100% - 24px);
  height: calc(100% - 68px);
  margin: 12px;
  position: relative;
  overflow: hidden;
  color: #000000;
}

.el-select {
  display: block;
  float: left;
}

.pic-upload {
  margin: 0 10px 0 20px;
}

.pic-upload /deep/ .el-upload--picture-card {
  width: 70px !important;
  height: 70px !important;
  line-height: 70px !important;
  border: 1px dashed rgba(232, 243, 254, 0.6) !important;
  background: rgba(79, 159, 255, 0.2) !important;
  border-radius: 4px !important;
  margin-bottom: 6px;
}

.pic-upload /deep/ .el-upload--picture-card i {
  color: #e8f3fe !important;
  font-size: 20px !important;
}

.pic-upload /deep/ .el-upload-list--picture-card {
  display: inline-block;
  height: 70px;
  margin-bottom: 6px;
  .el-upload-list__item {
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
    border: 0 !important;
    background: rgba(130, 181, 255, 0.2) !important;
    border-radius: 4px !important;
    margin: 0 6px 0 0 !important;
  }
  .el-upload-list__item-actions:hover {
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      background-color: rgba(0, 0, 0, 0.7);
      border-radius: 4px;
      i {
        font-size: 18px;
      }
      .el-icon-zoom-in:before {
        content: "\ED00";
        font-family: "iconfont";
      }
      .el-icon-delete:before {
        content: "\EC3F";
        font-family: "iconfont";
      }
    }
    span + span {
      margin-left: 6px;
    }
  }
}

.pic-upload /deep/ .el-upload-list--picture-card .el-upload-list__item i {
  color: #fff;
  font-size: 14px;
}

.search-box {
  position: absolute !important;
  top: 25px;
  left: 20px;
  z-index: 1001;
  /deep/ * {
    color: #606266;
  }
}

.row-box {
  display: flex;
  align-items: center;
  margin-bottom: 12px;

  .row-title {
    width: 70px;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
    color: #e8f3fe;
    line-height: 32px;
    margin-right: 12px;
    &.time {
      margin-left: 12px;
    }
  }
  .row-value {
    width: calc(100% - 82px);
  }
  .small-select-box {
    margin-right: 12px;
    width: 130px;
  }
  .big-box {
    width: calc(100% - 508px);
  }
  .pic-upload {
    margin: 0px !important;
  }
}
.buttons-box {
  display: flex;
  justify-content: center;
}
.oneKey-body {
  width: 800px;
  height: auto;
}
.t .btn-80-32 {
  width: 108px !important;
  height: 32px !important;
}
.oneKey-box {
  .oneKey-body:after {
    background: rgba(23, 37, 55, 0.9);
  }
  .popup-content {
    &.map-height {
      height: 542px;
    }
    /deep/ .map-div {
      .search-box {
        width: 320px;
        top: 12px;
        left: 12px;
        .search-box-wrapper {
          background: none !important;
          position: relative;
          height: 36px !important;
          &:after {
            content: "";
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #172537 0%, #3679da 100%);
            opacity: 0.8;
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: -1;
            border-radius: 8px;
            border: 1px solid #b0d4ff;
          }
          .el-input__inner {
            background: none !important;
            color: #e8f2fe !important;
          }
          .el-input__suffix {
            .el-input__clear:before {
              content: "\ec12";
              font-family: iconfont;
              color: #e8f3fe;
              font-size: 20px;
            }
          }
          .search-btn {
            background: none !important;
            color: #e8f3fe !important;
            font-size: 20px !important;
            width: 20px !important;
            margin-right: 12px;
            &:before {
              content: "\EC25";
            }
          }
        }
        .search-tips {
          background: #0f1926 !important;
          margin-top: 6px;
          .search-tips-li {
            color: #e8f2fe !important;
            .auto-item-span {
              color: rgba(79, 159, 255, 0.4) !important;
            }
            .key-words {
              color: #4f9fff;
              font-weight: normal;
            }
          }
          ul li {
            height: 32px;
            line-height: 32px;
            &.autocomplete-selected {
              background: rgba(79, 159, 255, 0.4);
            }
          }
        }
      }
    }
  }
}
/deep/ .oneKey-big-img {
  width: 800px;
  height: 574px;
  background: rgba(23, 37, 55, 0.9);
  border-radius: 8px;
  .el-dialog__header {
    background: url("~@/assets/image/onekey-bigimg-title.png");
    background-size: contain;
    height: 48px;
    padding: 16px 12px;
    border-bottom: 0;
    .el-dialog__title {
      height: 16px;
      font-size: 16px;
      font-weight: 500;
      color: #e8f3fe;
      line-height: 16px;
    }
    .el-dialog__headerbtn {
      //line-height: 18px;
      //height:18px;
      //font-size: 18px;
      top: 0 !important;
      right: 0 !important;
      .el-dialog__close {
        width: 38px;
        height: 38px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 12;
        background: url("~@/views/pages/video/img/video-ty/close.png") no-repeat
          center / 100% 100%;
        transform: translate(50%, -50%);
        cursor: pointer;
        &:before {
          display: none;
        }
      }
    }
  }
  .el-dialog__body {
    padding: 12px;
    div {
      width: 100%;
      height: 100%;
      img,
      video {
        width: 100%;
        height: 100%;
      }
      img {
        object-fit: fill;
        border-radius: 8px;
      }
    }
  }
}
.oneKey-content {
  padding: 12px;
}
.row-width {
  width: calc(50% - 87px) !important;
  /deep/ .alarm-search {
    .el-input__prefix {
      .el-icon-time {
        font-size: 18px !important;
        &:before {
          font-family: iconfont;
          content: "\EC18";
        }
      }
    }
  }
}
</style>
/*-------------------国土样式------------------------*/
<style lang="scss" scoped>
.g,
.ar-g,
.banner-gt {
  .oneKey-box {
    .oneKey-body {
      .popup-content {
        &.oneKey-content {
          padding: 12px;
        }
        .row-box {
          align-items: flex-start;
          .po {
            color: #ffeeb1 !important;
          }
          .row-title {
            color: #e4e7c1;
          }
          .row-value {
            .pic-upload {
              /deep/ .el-upload {
                background: rgba(100, 86, 46, 0.4) !important;
                border: 1px dashed rgba(228, 231, 193, 0.4) !important;
                i {
                  color: #ffeeb1 !important;
                }
              }
              /deep/ .el-upload-list__item-actions {
                span {
                  i {
                    color: #ffeeb1;
                  }
                }
              }
            }
            .c-textarea {
              /deep/ textarea {
                &::placeholder {
                  color: rgba(228, 231, 193, 0.7) !important;
                }
              }
            }
          }
        }
        /deep/ .map-div {
          .search-box {
            .search-box-wrapper {
              &:after {
                background: rgba(100, 86, 46, 0.4) !important;
                border: 1px solid #d5c174;
              }
              .el-input__inner {
                background: none !important;
                color: #e4e7c1 !important;
              }
              .el-input__suffix {
                .el-input__clear:before {
                  color: #ffeeb1;
                }
              }
              .search-btn {
                color: #ffeeb1 !important;
              }
            }
            .search-tips {
              background: linear-gradient(
                  180deg,
                  rgba(163, 144, 69, 0.53) 0%,
                  rgba(105, 95, 42, 0.18) 35px,
                  rgba(98, 88, 38, 0) 100px
                )
                rgba(0, 0, 0, 0.7) !important;
              border: 1px solid #6e674e !important;
              .search-tips-li {
                color: #e4e7c1 !important;
                .auto-item-span {
                  color: rgba(255, 238, 177, 0.7) !important;
                }
                .key-words {
                  color: #fffa28;
                }
              }
              ul li.autocomplete-selected {
                background: rgba(122, 113, 61, 0.36);
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.l2,
.ar-l2,
.banner-ly {
  .el-select /deep/ .el-input--mini .el-input__inner,
  .el-date-editor /deep/ .el-input__inner {
    border: 0 !important;
  }
  .oneKey-box {
    .oneKey-body {
      .popup-header {
        font-weight: 500;
      }
      .popup-content {
        height: 475px;
        padding: 12px !important;
        .row-box {
          align-items: flex-start;
          .po {
            color: #ffffff !important;
          }
          .row-title {
            color: #ffffff;
          }
          .row-value {
            .pic-upload {
              height: 60px !important;
              /deep/ .el-upload-list__item,
              /deep/ .el-upload--picture-card {
                width: 64px !important;
                height: 64px !important;
                border-radius: 4px;
              }
              /deep/ .el-upload {
                background: rgba(2, 137, 109, 0.2) !important;
                border-radius: 4px !important;
                i {
                  font-size: 20px !important;
                  color: #ffffff !important;
                  &:before {
                    content: "\ea6e";
                    font-family: "iconfont" !important;
                    color: #fff;
                  }
                }
              }
              /deep/ .el-upload-list__item-actions {
                height: 100%;
                top: 0;
                bottom: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(0, 0, 0, 0.7);
                span {
                  height: 24px;
                  line-height: 22px;
                  i {
                    font-size: 16px;
                    color: #ffffff;
                  }
                }
              }
            }
            /deep/ .alarm-search .el-input__prefix .el-icon-time {
              font-size: 18px !important;
              font-weight: unset;
              &:before {
                font-family: iconfont;
                content: "\E974";
              }
            }
          }
          /deep/ .address .el-input__inner {
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
          }
        }
        /deep/ .map-div {
          .search-box {
            width: 342px;
            height: 32px !important;
            .search-box-wrapper {
              background: rgba(0, 50, 39, 0.8) !important;
              border-radius: 4px;
              height: 32px !important;
              border: 0px;
              &:after {
                display: none;
              }
              .el-input__inner {
                background: none !important;
                color: #ffffff !important;
              }
              .el-input__suffix {
                .el-input__clear:before {
                  content: "\eacc";
                  font-family: "iconfont";
                  font-weight: normal;
                  font-size: 20px;
                  color: #ffffff;
                }
              }
              .search-btn {
                background: none !important;
                color: #ffffff !important;
                font-size: 18px;
                width: auto !important;
                margin-right: 12px;
                &:before {
                  content: "\E84E";
                }
              }
            }
            .search-tips {
              background: linear-gradient(
                  180deg,
                  rgba(0, 19, 30, 0.7) 0%,
                  #00131e 100%
                ),
                linear-gradient(
                  180deg,
                  rgba(2, 137, 109, 1) 0%,
                  rgba(2, 137, 109, 0) 100%
                ) !important;
              border: 1px solid #075b4a !important;
              .search-tips-li {
                color: #fff !important;
                .auto-item-span {
                  color: rgba(255, 255, 255, 0.7) !important;
                }
                .key-words {
                  color: rgba(249, 255, 108, 1);
                }
              }
              ul li.autocomplete-selected {
                background: rgba(2, 137, 109, 0.4) !important;
              }
            }
          }
        }
      }
    }
  }
  .map-div {
    border-radius: 8px;
    margin: 0;
    width: 100%;
    height: calc(100% - 46px);
  }
  .row-width {
    width: 287px !important;
  }
  .row-box .small-select-box {
    width: 130px;
  }
  .row-box .big-box {
    width: 264px;
  }
  .btns {
    margin-top: 0;
  }
}
</style>
<style lang="scss">
.one-key-ar {
  z-index: 100001 !important;
}
.oneKeyAlarm-scaleLine {
  position: absolute;
  right: 16px;
  bottom: 15px;
  background: #ffffff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 0 10px;
  &:before {
    content: "";
    width: 2px;
    height: 6px;
    pointer-events: none;
    position: absolute;
    left: 9px;
    top: 3px;
    background: #172537;
  }
  &:after {
    content: "";
    width: 2px;
    height: 6px;
    pointer-events: none;
    position: absolute;
    right: 9px;
    top: 3px;
    background: #172537;
  }
  .oneKeyAlarm-scaleLine-inner {
    margin-top: 5px;
    margin-bottom: 3px;
    padding-top: 2px;
    border-top: 2px solid #172537;
    color: #172537;
    font-size: 10px;
    text-align: center;
    transition: all 0.25s;
    will-change: contents, width;
  }
}

.ar-g .el-dialog__title {
  display: block;
}
</style>
<!-- 国土g ar-g -->
<style lang="scss">
.g,
.ar-g {
  .el-dialog__wrapper {
    .oneKey-big-img {
      background: linear-gradient(
          180deg,
          rgba(163, 144, 69, 0.53) 0%,
          rgba(105, 95, 42, 0.18) 35px,
          rgba(98, 88, 38, 0) 100px
        )
        rgba(0, 0, 0, 0.7) !important;
      border: 1px solid rgba(110, 103, 78, 0.9);
      .el-dialog__header {
        background: none;
        text-align: center;
        position: relative;
        &:before {
          content: "";
          width: 100%;
          height: 100%;
          opacity: 0.96;
          background: url("~@/assets/image/singleTabSel.png") no-repeat bottom
            center;
          pointer-events: none;
          position: absolute;
          left: 0;
          bottom: 0;
        }
        &:after {
          content: "";
          width: 100%;
          height: 1px;
          opacity: 0.35;
          background: linear-gradient(
            90deg,
            rgba(255, 222, 76, 0),
            rgba(255, 222, 76, 1),
            rgba(255, 222, 76, 0)
          );
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          pointer-events: none;
        }
        .el-dialog__title {
          color: #ffffff;
          text-shadow: 0px 1px 4px #dcd277;
        }
        .el-dialog__headerbtn {
          .el-dialog__close {
            background: url("~@/assets/image/icon-cancel-new.png") no-repeat
              center / 100% 100%;
          }
        }
      }
      .el-dialog__body {
        background: none;
      }
    }
  }
}
</style>
<!-- 林业l2 -->
<style lang="scss">
.l2 {
  .el-dialog__wrapper {
    .oneKey-big-img {
      border-radius: 0;
      padding: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 19, 30, 0.7) 0%,
        #00131e 100%
      );
      border: 1px solid;
      border-image: linear-gradient(
          360deg,
          rgba(7, 91, 74, 0.75),
          rgba(7, 91, 74, 0.3)
        )
        1 1;
      &:before,
      &:after {
        content: "";
        width: 21px;
        height: 25px;
        background: url("~@/assets/image/ar_ly/footer-left.png") center / 100%
          100%;
        position: absolute;
        top: auto;
        left: auto;
        bottom: -1px;
        pointer-events: none;
        z-index: 2;
        border-radius: 0;
      }
      &:before {
        left: -1px;
      }
      &:after {
        right: -1px;
        transform: rotateY(180deg);
      }
      .el-dialog__header {
        padding: 0;
        border-bottom: 0;
        position: relative;
        height: 48px;
        line-height: 46px;
        background: linear-gradient(
          90deg,
          rgba(2, 137, 109, 0) 0%,
          rgba(2, 137, 109, 0.2) 51%,
          rgba(2, 137, 109, 0) 100%
        );
        color: #fff;
        text-shadow: 0px 0px 18px rgba(0, 245, 193, 0.7);
        font-weight: 600;
        border-radius: 0;
        &:before {
          content: "";
          width: 100%;
          height: 100%;
          opacity: 0.96;
          background: url("~@/assets/image/singleTabSel-ly.png") no-repeat
              bottom center,
            url("~@/assets/image/video_ly/popup-header-xx.png") no-repeat center /
              auto 100%,
            url("~@/assets/image/video_ly/popup-header-k.png") no-repeat top
              center;
          pointer-events: none;
          position: absolute;
          left: 0;
          bottom: auto;
          top: -1px;
        }
        &:after {
          content: "";
          width: 100%;
          height: 1px;
          background: linear-gradient(
            270deg,
            rgba(255, 255, 255, 0) 0%,
            #ffffff 50%,
            rgba(255, 255, 255, 0) 100%
          );
          position: absolute;
          bottom: 1px;
          left: 50%;
          transform: translateX(-50%);
          pointer-events: none;
        }
        .el-dialog__title {
          font-weight: 600;
          color: #ffffff;
          line-height: 48px;
          text-shadow: 0px 0px 18px rgba(0, 245, 193, 0.7);
          height: 100%;
          font-size: 16px;
          text-align: center;
          display: block;
          position: relative;
          &:before {
            content: "";
            width: 8px;
            height: 1px;
            background: #00fff8;
            position: absolute;
            top: -1px;
            left: -1px;
          }
        }
        .el-dialog__headerbtn {
          width: 38px;
          height: 38px;
          right: -19px !important;
          top: -19px !important;
          .el-dialog__close {
            &:before {
              content: "";
              width: 100%;
              height: 100%;
              background: url("~@/assets/image/video_ly/popup-close.png")
                no-repeat;
              background-size: 100% 100%;
              position: absolute;
              top: 0;
              left: 0;
            }

            &:after {
              display: none;
            }
            &:hover {
              opacity: 0.6;
            }
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
      .el-dialog__body {
        background: none;
      }
    }
  }
  .el-dialog__title {
    display: block;
  }
}
</style>
